<template>
    <div id="app">
        <div id="anNiu">
            <router-link to="/zhanghaotianjia">
                <el-button type="primary">添加</el-button>
            </router-link>
        </div>
        <div id="neiRong">
            <el-table :data="table.slice((currentPage-1)*pageSize,currentPage*pageSize)" border>
                <el-table-column type=index label="序号" style="width: 5%" align="center" />
                <el-table-column prop="headPortrait" label="头像" style="width: 5%" align="center">
                    <template v-slot="scope">
                        <img :src="scope.row.headPortrait" alt="" width="90" height="90">
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="姓名" style="width: 6%" align="center" />
                <el-table-column prop="phone" label="联系方式" style="width: 8%" align="center" />
                <el-table-column prop="organization" label="所属组织" style="width: 15%" align="center" />
                <el-table-column prop="role" label="所属角色" style="width: 6%" align="center" />
                <el-table-column prop="nickname" label="账号" style="width: 6%" align="center" />
                <el-table-column prop="password" label="密码" style="width: 6%" align="center" />
                <el-table-column prop="creator" label="创建人" style="width: 6%" align="center" />
                <el-table-column prop="creatTime" label="创建日期" style="width: 6%" align="center" />
                <el-table-column prop="status" label="状态" style="width: 6%" align="center" />
                <el-table-column fixed="right" label="操作" style="width: 22%" align="center">
                    <template #default="scoped">
                        <el-button link type="primary" size="small" @click='bianji(scoped.row)'>编辑</el-button>
                        <el-button link type="primary" size="small" @click='ifjingyong(scoped.row)'
                            v-if="scoped.row.status == '禁用中'">启用</el-button>
                        <el-button link type="primary" size="small" @click='ifjingyong(scoped.row)'
                            v-if="scoped.row.status == '启用中'">禁用</el-button>
                        <el-button text @click="dialogVisible2 = true">
                            <el-button link type="primary" size="small" @click="openDel()">删除</el-button>
                        </el-button>
                        <el-button text @click="openResetting()">
                            <el-button link type="primary" size="small">重置密码</el-button>
                        </el-button>
                        <!-- <el-button link type="primary" size="small"></el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <div>
        <!-- //模态框1 -->
        <el-dialog class="mu" v-model="dialogVisible1" title="提示:" width="30%" :before-close="handleClose1">
            <p>是否确认重置该账号</p>
            <p>重置后该账号登录密码将恢复为默认密码：123456</p>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取消</el-button>
                    <el-button type="primary" @click="resetting()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- //模态框2 -->
        <el-dialog class="mu" v-model="dialogVisible2" title="删除确认" width="30%" :before-close="handleClose2">
            <p>是否确认删除该账号</p>
            <p>删除后将不可恢复</p>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="del()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <div id="fenye" class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="table.length" @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1" />
        </div>
</template>
<script lang="ts">
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from '@/util/http'
import { defineComponent, ref, onBeforeMount, reactive, toRefs, onMounted } from 'vue'
import store from '@/store/zhou/index';
import { method } from 'lodash'

export default defineComponent({
    name: "below",
    setup() {
        const router = useRouter();
        //禁用模态框
        const dialogVisible2 = ref(false)
        const handleClose2 = (done: () => void) => {
            ElMessageBox.confirm('确认关闭？')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        }
        //重置模态框
        const dialogVisible1 = ref(false)
        const handleClose1 = (done: () => void) => {
            ElMessageBox.confirm('确认关闭？')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        }

        //编辑路由传参
        const bianji = (obj) => {
            // obj=JSON.stringify(obj)
            console.log(obj);
            router.push({ name: 'zhanghaobianji', query: { key: JSON.stringify(obj) } });
        }

        //禁用
        const ifjingyong = (obj) => {
            if (obj.status == '启用中') {
                axios({
                    method: "post",
                    url: '/districtUser/disableDistrictUser',
                    params: {
                        id: obj.userId
                    }
                }).then((res) => {
                    alert('禁用成功')
                    console.log('禁用成功');
                })
            } else {
                axios({
                    method: "post",
                    url: '/districtUser/enableDistrictUser',
                    params: {
                        id: obj.userId
                    }
                }).then((res) => {
                    alert('启用成功')
                    console.log('启用成功');
                })

            }
        }

        //打开重置模态框
        function openResetting() {
            dialogVisible1.value = true
        }
        //重置
        async function resetting() {//重置密码
            await axios({
                method: 'post',
                url: '/districtUser/resetPassword',
                params: {
                    id: data.id
                }
            }).then((res) => {
                console.log("重置成功");
                dialogVisible1.value = false;
                // console.log(res.data.data);
                // Table.table = res.data.data
                // console.log(Table.table);
                // Table.table.forEach(element => {
                //     element.createDate
                // });
            })
        }

        //打开删除模态框
        function openDel() {
            dialogVisible2.value = true;
        }
        //删除
        function del() {
            axios({
                method: 'post',
                url: '/districtUser/deleteDistrictUser',
                params: {
                    id: data.id
                }
            }).then((res) => {
                console.log('删除请求成功');
                dialogVisible2.value = false;
            })
        }
        const each:any = reactive({
            id:''
        })
        let data:any=reactive([])
        //数据渲染
        let Table = reactive({
            table: []
        })
        onBeforeMount(() => {
            axios({
                method: 'get',
                url: '/districtUser/queryAllDistrictUsersByPage',
                params: {
                    area: '相城区',
                    currentPage: 1,//一页
                    pageSize: 1000//多少条页面
                }
            }).then((res) => {
                // console.log("成功");
                console.log(res.data.data);
                Table.table = res.data.data;
                 res.data.data.forEach((itme)=>{
                    each.id=itme.userId
                    data.push(JSON.parse(JSON.stringify(each)))
                 })
                // console.log("======")
                // console.log(store.getters.zhanghao)
                console.log(data);
                
                // Table.table.forEach(element => {
                //     element.createDate
                // });
            });
        })
        
        const currentPage = ref(1)
        const pageSize = ref(10)
        const small = ref(false)
        const background = ref(false)
        const disabled = ref(false)
        const handleSizeChange1 = (val: number) => {
            console.log(`${val} items per page`)
        }
        const handleCurrentChange1 = (val: number) => {
            console.log(`current page: ${val}`)
        }
        // onMounted(()=>{

        // })

        // onMounted(()=>{
        //     chongzhi()
        // })
        return {
            // tableData,//页面数据
            handleClose1,//关闭模态框1
            dialogVisible1,//模态框2确定按钮
            handleClose2,//关闭模态框2
            dialogVisible2,//模态框2确定按钮
            bianji,//编辑事件
            router,//引入路由
            ifjingyong,//禁用判断
            resetting,//重置密码
            del,//删除数据
            Table,
            ...toRefs(Table),
            openResetting,//打开重置模态框
            openDel,//打开删除模态框
            each,
            data,
            // xiugaishuju
            currentPage,
            pageSize,
            small,
            background,
            disabled,
            handleSizeChange1,
            handleCurrentChange1,
        }
    }

})

</script>
<style scoped>
#app {
    width: 100%;
    margin-top: 30px;
    background-color: white;
    font-size: 13px;
    color: #333;
}

#anNiu {
    padding: 15px 35px;

}

#anNiu>button {
    width: 80px;
}

#neiRong {
    margin: 0 35px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.mu {
    z-index: 5000;
}
#fenye {
    padding: 10px 35px;
    display: flex;
    justify-content: end;
    background-color: white;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>